<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module :title="title" />
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="province-item" @click="tocategoryList(item.category)" v-for="item in papersList" :key="item.category">
				<view class="sjmc category">{{ item.category }}</view>
				<view class="sjmc count">{{ item.count }} 套</view>
				<view class="arrow">></view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		papersCategory
	} from "@/config/api.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				title: '申试比呀',
				height: 0,
				papersList: [],
				downOption: {use: false},
				upOption: {
					textNoMore: '一不小心被你看完啦~',
					toTop: {right: '24rpx',bottom: '60rpx'}
				}
			}
		},
		computed: {...mapState(['user'])},
		onShow() {
			const res = uni.getSystemInfoSync()
			this.height = res.windowHeight - 150 // 100为组件高度
			this.mescroll.resetUpScroll()
		},
		methods: {
			...mapMutations(['setLoginShow', 'emptyUserInfo']),
			// 添加分享功能
			onShareAppMessage() {
				return {
					title: '申试比呀 - 申论参考答案对比助手',
					path: '/pages/index/index',
					imageUrl: '/static/img/share.png'
				}
			},
			/*上拉加载的回调: page.num:从1开始, page.size:每页数据数,默认10 */
			async upCallback(page) {
				try {
					const res = await papersCategory(`?pageNum=${page.num}&pageSize=${page.size}`)
					if (res) {
						// 后台接口有返回列表的总数据量
						this.mescroll.endBySize(res.rows?.length || 0, res.total); 
						// 如果是第一页需手动制空列表
						if (page.num == 1) {
							this.papersList = []
						}
						this.papersList = Object.freeze(this.papersList.concat(res.rows)); 
					} else {
						this.emptyUserInfo();
						uni.showModal({
							title: '提示',
							content: '当前登录已无效，请重新登陆。',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				} catch (error) {
					//联网失败, 结束加载
					this.mescroll.endErr();
				}
			},
			tocategoryList(item) {
				console.log("本次选择省份", item);
				uni.navigateTo({
					url: `/pages/papers/index?category=${item}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view-contain {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F5F6F5;
		height: 100vh;
		padding: 20px;
		padding-top: 40px;
		/* 增加顶部内边距以适配刘海屏 */
	}

	.welcome-message {
		margin-bottom: 20px;
		font-size: 18px;
		color: #333;
	}

	.province-list {
		width: 100%;
	}

	.province-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 25px;
		background-color: #E0F7FA;
		margin-bottom: 5px;
		border-radius: 5px;
	}

	.arrow {
		font-size: 38px;
		color: #333;
	}

	.review-item {
		width: calc(100vw - 48rpx);
		margin: 12rpx 24rpx 12rpx;
		padding: 24rpx;
		background-color: #FFF;
		border-radius: 32rpx;

		.zexq {
			margin: 36rpx 0;
			min-width: 480rpx;
			font-size: 24rpx;
			font-weight: normal;
			color: #000;

			.item {
				margin-right: 16rpx;
				padding: 2rpx 4rpx;
				border: 1rpx solid #ccc;
			}
		}

		.sjmc {
			font-size: 42rpx;
			font-weight: bold;
			margin-bottom: 32rpx;
			white-space: normal;
			word-break: break-all;
			overflow: hidden;
		}

		.kssj {
			font-size: 28rpx;
			font-weight: normal;
			color: #333;
		}

		.ksfs {
			font-size: 56rpx;

			.success {
				color: #5ac725;
			}

			.warning {
				color: #f9ae3d;
			}

			.error {
				color: #f56c6c;
			}
		}

		.btn-detail {
			border-radius: 12rpx;
			font-size: 28rpx;
			padding: 0 12rpx;
			color: #409EFF;
			border: 1rpx solid #409EFF;
		}
	}

	.category {
		font-size: 48rpx;
		font-weight: bold;
	}

	.count {
		font-size: 48rpx;
		font-weight: bold;
		color: blue;
	}
</style>